<!--
  点击[批量打印]
  请求条件筛选后的所有数据
  弹出确认框 是否确认打印x条数据？[总数不能超过500条]
  点击[确认]
  -----↑ 父组件内实现 -----

  打印进度条 + 静默打印
  完成打印

  中途关掉弹窗
  弹出确认框 是否确认中断打印？
  同时settimeout停止调用打印方法

  或者就不能中断！
 -->
<template>
  <div>
    <el-dialog
      title=""
      custom-class="perDialog"
      :visible.sync="perDialogVisible"
      :modal="false"
      @close="closePerDialog"
    >
      <!-- 打印进度条 -->
      <el-progress :percentage="printPer"></el-progress>
      <div class="info_row flex_bet">
        <div>
          正在打印 :
          <span v-if="printData.vehicle_num"
            >{{ printData.vehicle_num }} -
            {{ printData.order_type == 1 ? "出厂单" : "入厂单" }} -
            {{ printData.payload }}</span
          >
          <span v-else>/</span>
        </div>
        <div>
          成功<span class="num">{{ successNum }}</span
          >条 失败<span class="num fail">{{ failNum }}</span
          >条
        </div>
      </div>
    </el-dialog>
    <!-- 打印的页面 -->
    <div id="printDiv">
      <div ref="invoiceDtl" class="fontType printbox">
        <div class="title">
          <div>东阳市世展交通产业发展有限公司</div>
        </div>

        <div class="sub_title">
          <div class="order_type">
            {{ printData.order_type == 1 ? "出厂单" : "入厂单" }}
          </div>
          <div class="text-flex">
            <span>№：{{ printData.gross_device_num }}</span>
            <span
              >日期：{{
                printData.gross_time
                  ? printData.gross_time.split(" ")[0]
                  : new Date().format("yyyy-MM-dd")
              }}</span
            >
          </div>
        </div>

        <table border="1" cellspacing="0" cellpadding="0">
          <tr></tr>
          <tr class="fontType">
            <td>车牌号码</td>
            <td>{{ printData.vehicle_num }}</td>
            <td>
              <span>货物名称</span>
            </td>
            <td>
              <span>{{ printData.payload }}</span>
            </td>
          </tr>
          <tr class="fontType">
            <td>毛重时间</td>
            <td>{{ printData.gross_time }}</td>
            <td>毛重（吨）</td>
            <td>
              {{ printData.gross_weight || 0 }}
            </td>
          </tr>
          <tr class="fontType">
            <td>发货单位</td>
            <td>{{ printData.vender }}</td>
            <td>皮重（吨）</td>
            <td>
              {{ printData.tare_weight || 0 }}
            </td>
          </tr>
          <tr class="fontType">
            <td>承运单位</td>
            <td></td>
            <td>净重（吨）</td>
            <td>
              {{ printData.net_weight || 0 }}
            </td>
          </tr>
          <tr class="fontType">
            <td>收货单位</td>
            <td>{{ printData.customer }}</td>
            <td>备注</td>
            <td></td>
          </tr>
        </table>

        <div class="text-flex" style="margin-top: 10px">
          <div>白联：存根</div>
          <div>红联：结算</div>
          <div>蓝联：客户</div>
          <div>黄联：记账</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//为了静默打印
import { io } from "socket.io-client";

export default {
  name: "hiprint",
  props: {
    // 待打印数据列表
    printDataList: {
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      perDialogVisible: false,
      // 打印插件
      hiprintTemplate: "",
      // socket: "",
      // 当前打印数据
      printData: {},
      // 打印到第几个
      printIndex: 0,
      successNum: 0,
      failNum: 0
    };
  },
  computed: {
    // 计算打印进度
    printPer() {
      return this.printDataList.length == 0
        ? 0
        : Number(
            ((this.printIndex / this.printDataList.length) * 100).toFixed(0)
          );
    }
  },
  watch: {},
  created() {
    // this.socket = io("http://2.0.0.1:17521", {
    //   transports: ["websocket"],
    //   auth: {
    //     token: "vue-plugin-hiprint" // 在此处填入你 client 设置的 token，缺省可留空
    //   }
    // });
  },
  beforeDestroy() {
    // 要销毁这个socket
    // if (this.socket) {
    //   this.socket.disconnect();
    // }
  },
  mounted() {
    this.perDialogVisible = true;
    let that = this;
    // 初始化打印
    const hiprintTemplate_ = new that.$pluginName.PrintTemplate();
    that.hiprintTemplate = hiprintTemplate_;
    // 打印第一条
    that.printOneForm(that.printDataList[that.printIndex]);
    // 直接打印回调
    // 发送任务到打印机成功
    that.hiprintTemplate.on("printSuccess", function(e) {
      console.log("打印成功啦！！！！！！");
      that.printIndex++;
      that.successNum++;
      if (that.printIndex < that.printDataList.length) {
        // 加个定时器 防止打印机还没收到消息？
        // 开始打印下一条数据
        that.printOneForm(that.printDataList[that.printIndex]);
      } else {
      }
    });
    // 发送任务到打印机失败
    that.hiprintTemplate.on("printError", function(e) {
      console.log("打印失败……");
      that.printIndex++;
      that.failNum++;
      if (that.printIndex < that.printDataList.length) {
        // 开始打印下一条数据
        that.printOneForm(that.printDataList[that.printIndex]);
      } else {
      }
    });
  },
  methods: {
    // 打印某一条数据
    printOneForm(data) {
      this.printData = data;
      // 设置元素样式-开始
      let d = document.getElementById("printDiv");
      var elem = d.getElementsByClassName("fontType");
      for (var i = 0; i < elem.length; i++) {
        elem[i].style.fontWeight = "800";
      }

      var elements = d.getElementsByClassName("title");
      for (var i = 0; i < elements.length; i++) {
        elements[i].style.position = "relative";
        elements[i].style.fontSize = "22px";
        elements[i].style.marginBottom = "15px";
        elements[i].style.textAlign = "center";
      }

      var elements2 = d.getElementsByClassName("sub_title");
      for (var i = 0; i < elements2.length; i++) {
        elements2[i].style.position = "relative";
      }

      var elements3 = d.getElementsByClassName("order_type");
      for (var i = 0; i < elements3.length; i++) {
        elements3[i].style.position = "absolute";
        elements3[i].style.bottom = "0";
        elements3[i].style.width = "100%";
        elements3[i].style.textAlign = "center";
        elements3[i].style.letterSpacing = "1em";
      }

      var elements4 = d.getElementsByTagName("table");
      for (var i = 0; i < elements4.length; i++) {
        elements4[i].style.width = "100%";
        elements4[i].style.fontSize = "14px";
        elements4[i].style.textAlign = "center";
        elements4[i].style.borderCollapse = "collapse";
        elements4[i].style.minHeight = "32px";
        elements4[i].style.lineHeight = "32px";
        elements4[i].style.marginTop = "15px";
        elements4[i].style.border = "1px solid #000";
        elements4[i].style.padding = "0 3px";
      }

      var elements5 = d.getElementsByTagName("td");
      for (var i = 0; i < elements5.length; i++) {
        elements5[i].style.border = "1px solid #000";
      }

      var elements6 = d.getElementsByClassName("printbox");
      for (var i = 0; i < elements6.length; i++) {
        elements6[i].style.maxWidth = "720px";
        elements6[i].style.margin = "20px";
      }

      var elements7 = d.getElementsByClassName("text-flex");
      for (var i = 0; i < elements7.length; i++) {
        elements7[i].style.marginTop = "5px";
        elements7[i].style.fontSize = "14px";
        elements7[i].style.display = "flex";
        elements7[i].style.justifyContent = "space-between";
      }

      var elements8 = d
        .getElementsByTagName("table")[0]
        .getElementsByTagName("tr");
      for (var i = 0; i < elements8.length; i++) {
        let thEle = elements8[i].getElementsByTagName("th");
        for (var j = 0; j < thEle.length; j++) {
          thEle[j].style.border = "1px solid #000";
          thEle[j].style.padding = "0 3px";
          thEle[j].style.fontSize = "14px";
        }
        let tdEle = elements8[i].getElementsByTagName("td");
        for (var j = 0; j < tdEle.length; j++) {
          tdEle[j].style.border = "1px solid #000";
          tdEle[j].style.padding = "0 3px";
          tdEle[j].style.fontSize = "14px";
        }
      }
      // 设置元素样式-结束

      // 预览打印内容
      // this.hiprintTemplate.printByHtml(this.$refs.invoiceDtl, {});

      //静默打印
      //获取html

      this.$nextTick(() => {
        let html = this.$refs.invoiceDtl.outerHTML;

        this.hiprintTemplate.printByHtml2(this.$refs.invoiceDtl, {
          //跳过预览直接打印
          // printer: "", // 使用默认打印机
          html,
          landscape: true, // 是否横向打印 默认 false
          color: false // 是否打印颜色 默认 true
          // copies: 1 // 打印份数 默认 1
        });
      });
    },
    // 关闭打印进度的弹窗
    closePerDialog() {
      // 如果是中途关掉弹窗
      // 弹出确认框 是否确认结束打印？
      // 确认结束 - 调用父组件方法销毁组件
      // 取消结束 - 关闭确认框
      // 如果是已经完成了所有打印
      // 直接调用父组件方法销毁组件

      this.$emit("closeHiPrint");
    }
  }
};
</script>
<style lang="scss" scoped>
.perDialog {
  .info_row {
    font-size: 18px;
    margin-top: 30px;
    .num {
      font-weight: bold;
      color: #159f3b;
      margin: 0 5px;
      &.fail {
        color: #ff5151;
      }
    }
  }
}
// .fontType {
//   font-weight: 800;
//   color: black;
// }

// .title {
//   position: relative;
//   font-size: 22px;
//   margin-bottom: 15px;
//   text-align: center;
// }
// .sub_title {
//   position: relative;

//   .order_type {
//     position: absolute;
//     bottom: 0;
//     width: 100%;
//     text-align: center;
//     letter-spacing: 1em;
//   }
// }

// td {
//   border: 1px solid #000;
// }

// table,
// table tr th,
// table tr td {
//   border: 1px solid #000;
//   padding: 0 3px;
//   font-size: 14px;
// }

// .text-flex {
//   margin-top: 5px;
//   font-size: 14px;
//   display: flex;
//   justify-content: space-between;
// }

// table {
//   width: 100%;
//   font-size: 14px;
//   text-align: center;
//   border-collapse: collapse;
//   min-height: 32px;
//   line-height: 32px;
//   margin-top: 15px;
// }

// .printbox {
//   max-width: 720px;
// }

// ::v-deep {
//   .el-dialog__body {
//     padding: 20px;
//   }
// }
</style>
